<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="head.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>音乐欣赏</title>
</head>
<body>
<div class="container">
<div class="form-group">
					 <button type="button" class="btn btn-default selMisic">搜索</button>
					<div class="col-sm-10">
						<input type="text" class="form-control" id="kd" />
					</div>
				</div>
	<div class="row clearfix">
		<div class="col-md-12 column">
			<h3>
				音乐列表
			</h3>
			<table class="table table-hover">
				<thead>
					<tr>
						<th>
							歌手
						</th>
						<th>
							歌曲名
						</th>
						<th>
							点击播放
						</th>
					</tr>
				</thead>
				<tbody id = "music">
				</tbody>
			</table>
		</div>
	</div>
</div>
<input type="hidden" id="pathId" value="<%=request.getContextPath() %>">
</body>
<script>
$(".selMisic").click(function(){
	var kd=$("#kd").val();
	if(kd==""){
		alert("音乐名称不能为空");
		return;
	}
	$.ajax({ 
		   type: "get", 
		   url: $("#pathId").val()+"/m/ms?kd="+kd,
		   cache:false, 
		   async:false, 
		   success: function(data){
			   var html = "";
			   $.each(data, function(i, res) {
				   html =html + "<tr class='success'><td>"+res.author+"</td><td>"+res.title+"</td><td><audio class = 'audio' src="+res.url+" controls='controls'>Your browser does not support the audio element.</audio></td><tr>";
			   });
		   	   $("#music").html(html);
		   }
		});
});
</script>
</html>